<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
      <div style="position: relative;top: 12%;right: 8%;">
          <div slot="center">
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['apiId']"/>
      </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.classification','接口分类')">
            <a-select v-decorator="['classificationId']" :options="classificationOptions" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.apiKey','接口别名')">
          <a-input :placeholder="i18n('form.apiKey','接口别名')" v-decorator="['apiKey', {rules: [{required: true, message: this.i18n('form.apiKey','接口别名','input')}]}]"/>
        </a-form-item>
			  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.apiName','接口名称')">
					<a-input :placeholder="i18n('form.apiName','接口名称')" v-decorator="['apiName', {rules: [{required: true, message: this.i18n('form.apiName','接口名称','input')}]}]"/>
			  </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.interfaceType','接口类型')">
            <a-select
                v-model="apiType"
            >
                <a-select-option value="RESTful">
                    RESTful
                </a-select-option>
                <a-select-option value="SOAP">
                    SOAP
                </a-select-option>
            </a-select>
        </a-form-item>
			  <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.interfacePath','接口路径')" v-if="apiType=='RESTful'">
                  <a-input v-decorator="['apiPath',{rules: [{ required: true, message: i18n('form.interfacePath','接口路径','input') }]}]" style="width: 100%">
                      <a-select
                          slot="addonBefore"
                          v-decorator="['apiMethod', { initialValue: 'GET' }]"
                          style="width: 90px"
                      >
                          <a-select-option value="GET">
                              GET
                          </a-select-option>
                          <a-select-option value="POST">
                              POST
                          </a-select-option>
                          <a-select-option value="PUT">
                              PUT
                          </a-select-option>
                          <a-select-option value="DELETE">
                              DELETE
                          </a-select-option>
                      </a-select>
                  </a-input>
			  </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('form.interfacePath','接口路径')" v-if="apiType=='SOAP'">
            <a-input v-decorator="['apiPath',{rules: [{ required: true, message:i18n('form.interfacePath','接口路径','input') }]}]" style="width: 100%" />
        </a-form-item>
    </a-form>
          </div>
      </div>
  </rx-dialog>
</template>
<script>
  import SysInterfaceApiApi from '@/api/system/core/sysInterfaceApi'
  import SysInterfaceClassificationApi from "@/api/system/core/sysInterfaceClassification";
  import {BaseForm,RxDialog} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'SysInterfaceApiAdd',
    mixins:[BaseForm],
    props:['projectId','classificationId'],
    components: {
      RxDialog,
    },
    data(){
      return {
          classificationOptions:[],
          apiType:'RESTful',
      }
    },
    created() {
        this.loadClassification();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "sysInterfaceProject", key);
        },
      get(id){
        return SysInterfaceApiApi.get(id);
      },
      save(values){
        values.projectId=this.projectId;
        values.isLog='NO';
        values.status='UNDONE';
        values.apiType=this.apiType;
        return SysInterfaceApiApi.save(values);
      },
      loadClassification(){
          var self_ = this;
          SysInterfaceClassificationApi.queryByProjectId(this.projectId).then(data=>{
              self_.classificationOptions=data.map((item,index)=>{
                  if(index==0){
                      var classificationId=self_.classificationId;
                      if(!self_.classificationId){
                          classificationId=item.classificationId;
                      }
                      self_.form.setFieldsValue({'classificationId': classificationId})
                  }
                  return {label:item.classificationName,value:item.classificationId};
              })
          })
      }
    }
  }
</script>
